<script setup lang="ts">
import {reactive, inject, ref, computed} from 'vue';
import {useRouter} from 'vue-router';
import {userModify} from '@/api/my';
import {Toast} from 'vant';
import {myStore} from '@/store/my'
import {userStore} from '@/store/user'
import {uploadAvatar,updateUserInfo} from '@/api/user'

const {closeChange} = inject('popup') as any
const store: any = myStore()

const router = useRouter()

const showPicker = ref(false)
const userInfo = ref<any>({})
const avatar = ref<Array<any>>([{
  url: ""
}])

const currentDate = ref(new Date(2021, 0, 17));
const minAndMaxDate = reactive({
  minDate: new Date(1900, 0, 17),
  maxDate: new Date()
})

userStore().getUserInfo().then(res => {
  userInfo.value = res;
  //转换字符串为时间
  currentDate.value = new Date(userInfo.value.birthday)
  userInfo.value.birthday = userInfo.value.birthday.split("T")[0]
  //头像
  avatar.value[0].url = "/api" + userInfo.value.avatar
})

const setUserModify = async () => {
  // state.loading = true
  updateUserInfo(userInfo.value).then(res => {
    Toast(res.msg)
  })
  // state.loading = false
}
const onConfirm = () => {
  //转换日期为字符串
  userInfo.value.birthday = currentDate.value.getFullYear() + '-'
      + (currentDate.value.getMonth() + 1) + '-'
      + currentDate.value.getDate();
  showPicker.value = false;
};

const afterRead = (file: any) => {
  // 此时可以自行将文件上传至服务器
  let forms = new FormData()
  forms.append("file", file.file)
  console.log(forms)
  uploadAvatar(forms).then(res => {
    avatar.value[0].url = "/api" + res.imgUrl
    userInfo.value.avatar = res.imgUrl
  })
};
const deleteFile = () => {
  avatar.value = []
}
</script>
<template>
  <van-nav-bar title="个人信息" left-arrow @click-left="closeChange"/>
  <div class="user-page">
    <van-form @submit="setUserModify">
      <div class="user-pic">
        <van-uploader
            v-model="avatar"
            accept=".jpg,.png,.gif"
            :after-read="afterRead"
            :before-delete="deleteFile"
            max-count="1"/>
      </div>
      <div class="user-item">
        <h5>用户名</h5>
        <van-field v-model="userInfo.userName" label="" placeholder="请输入您的用户名"/>
      </div>
      <div class="user-item">
        <h5>姓名</h5>
        <van-field v-model="userInfo.nickName" label="" placeholder="请输入您的姓名"/>
      </div>
      <div class="user-item">
        <h5>性别</h5>
        <van-field name="radio">
          <template #input>
            <van-radio-group v-model="userInfo.sex" direction="horizontal">
              <van-radio name="0">男</van-radio>
              <van-radio name="1">女</van-radio>
              <van-radio name="2">未知</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </div>
      <div class="user-item">
        <h5>出生日期</h5>
        <van-field
            v-model="userInfo.birthday"
            is-link
            readonly
            name="datePicker"
            label="时间选择"
            placeholder="点击选择时间"
            @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-datetime-picker
              v-model="currentDate"
              type="date"
              title="选择年月日"
              :min-date="minAndMaxDate.minDate"
              :max-date="minAndMaxDate.maxDate"
              @confirm="onConfirm"
              @cancel="showPicker = false"
          />
        </van-popup>
      </div>
      <button class="wy-confirm-btn" native-type="submit">完成</button>
    </van-form>
  </div>
</template>
<style scoped>
:deep(.van-image__img) {
  border-radius: 50%;
}

:deep(.van-uploader__upload) {
  margin: 0;
}

.user-page {
  margin: 0 0.6rem;
}

.user-pic {
  text-align: center;
  padding: 0.67rem;
  margin-bottom: 1.47rem;
  border-bottom: 1px solid #f3f3f3;
}

.user-pic img {
  width: 3.7rem;
  height: 3.7rem;
  border-radius: 50%;
}

.wy-confirm-btn {
  height: 2.35rem;
  line-height: 2.35rem;
  background: linear-gradient(90deg, #FEA829, #FE8F27);
  border-radius: 0.27rem;
  width: calc(100vw - 1.2rem);
  border: 0;
  position: fixed;
  left: 0;
  bottom: 0;
  margin: 0 0.6rem 0.6rem;
  font-size: 0.8rem;
  color: #FFFFFF;
}
</style>